{% load staticfiles %}
{% load myfilter %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{{ product.product_title }}">
    <meta name="author" content="Coderthemes">

    <!-- App favicon -->
    <link rel="shortcut icon" href="{% static '' %}zircos/assets/images/favicon.ico">
    <!-- App title -->
    <title>{{ product.product_title }} - WanFeng</title>

    <!-- Bx slider css -->
    <link href="{% static '' %}zircos/plugins/bx-slider/jquery.bxslider.css" rel="stylesheet" type="text/css" />


    <!-- Plugins css-->
    <link href="{% static '' %}zircos/plugins/bootstrap-tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" />
    <link href="{% static '' %}zircos/plugins/multiselect/css/multi-select.css"  rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
    <link href="{% static '' %}zircos/plugins/bootstrap-touchspin/css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />

    <!-- DataTables -->
    <link href="{% static '' %}zircos/plugins/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>

    <!-- Sweet Alert -->
    <link href="{% static '' %}zircos/plugins/bootstrap-sweetalert/sweet-alert.css" rel="stylesheet" type="text/css">

    <!-- Tooltipster css -->
    <link rel="stylesheet" href="{% static '' %}zircos/assets/css/kjds.css">

    <!-- App css -->
    <link href="{% static '' %}zircos/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/core.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/components.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/icons.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/pages.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/menu.css" rel="stylesheet" type="text/css" />
    <link href="{% static '' %}zircos/assets/css/responsive.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{% static '' %}zircos/plugins/switchery/switchery.min.css">

    <!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script src="{% static '' %}zircos/assets/js/modernizr.min.js"></script>

    <script>
        var currency_unit = '$'
    </script>

</head>


<body class="widescreen fixed-left-void">


<!-- Begin page -->
<div id="wrapper" class="enlarged forced">

<!-- Top Bar Start -->
{% include 'zircos/block/topbar.html' %}
<!-- Top Bar End -->


<!-- ========== Left Sidebar Start ========== -->
<!-- Left Sidebar End -->



<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container">


<!-- ========== Common Modal Start ========== -->
{% include 'zircos/block/modal.html' %}
<!-- Common Modal End -->


<div class="row">
    <div class="col-xs-12">
        <div class="page-title-box">
            <h4 class="page-title">商品数据分析 </h4>
            <ol class="breadcrumb p-0 m-0">
                <li>
                    <a href="{% url 'dashboard' %}">控制台</a>
                </li>
                <li>
                    <a href="{% url 'products' %}">产品列表 </a>
                </li>
                <li class="active">
                    产品分析
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!-- end row -->

<div class="property-detail-wrapper">
<div class="row">
<div class="col-md-4 m-t-30">
    <div class="row">
        <ul class="bxslider property-slider">
            <li><img src="{{ product.thumb }}" /></li>

        </ul>

        <div id="bx-pager" class="text-center hide-phone">
            <a data-slide-index="0" href=""><img src="{{ product.thumb }}" height="70" /></a>

        </div>
    </div>
    <!-- end slider -->

    <div class="row text-center m-t-10">
        <div class="col-xs-3">
            <h4 class="text-orange" id="totalsales">-</h4>
            <p class="text-overflow" title="Square Feet">总销售额</p>
        </div>
        <div class="col-xs-3">
            <h4 class="text-orange" id="monthsales">-</h4>
            <p class="text-overflow" title="Bedrooms">月销售额</p>
        </div>
        <div class="col-xs-3">
            <h4 class="text-orange" id="weeksales">-</h4>
            <p class="text-overflow" title="Parking Space">周销售额</p>
        </div>
        <div class="col-xs-3">
            <h4 class="text-muted" style="font-size: 14px;line-height:18px;" id="firstOrder">{{ product.first_order_date|date:"Y-m-d" }}</h4>
            <p class="text-overflow" title="Parking Space">首单日期</p>
        </div>

    </div>

</div> <!-- end col -->

<div class="col-md-8 m-t-30">
    <div class="text-center card-box">


        <div class="member-card">


            <div class="">
                <h4 class="m-b-5 text-left" style="font-size: 24px;">{% if product.product_title_chinese %}{{ product.product_title_chinese }}{% else %}{{ product.product_id|TranslateProductTitle }}{% endif %}
                    <a href="{% url 'aliexpress:open_product' product.product_id %}" target="_blank" class="text-muted"><i class="glyphicon glyphicon-share-alt"> </i></a></h4>
                <p>
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                    <i class="fa fa-star text-warning"></i>
                    <span>( {{ product.average_star_rating }} )</span>
                </p>
            </div>

            <div class="row m-t-20">
                <div class="col-md-12">
                    <div class="price-area row">
                        <div class="sorrow-up"></div>
                        <div class="price-box col-md-8">{% if product.is_remove %}<span class="font-red">产品已下架{% else %}价格<span class="font-red"><em>{{ product.currency }}</em> {% ifnotequal product.low_price product.high_price%}{{ product.low_price|calPrice:product.discount }}-{{ product.high_price|calPrice:product.discount }}{% else %}<em>{{ product.high_price|calPrice:product.discount }}</em>{% endifnotequal %}{% endif %}</span></div>
                        <div class="price-box logistics-price col-md-4">推荐指数<span class="font-grey"> {% if product.score %}{% widthratio product.score 1 100 %}{% else %}-{% endif %}</span></div>
                    </div>
                </div>
            </div>

            <div class="m-t-20">
                <ul class="list-inline">
                    <li>
                        <h4 id="ogr3-{{ product.product_id }}" {% if product.three_growth_rates > 0 %}class="text-danger"{% else %}class="text-success"{% endif %}>{% if product.three_growth_rates %}{% widthratio product.three_growth_rates 1 100 %}%{% else %}-{% endif %}</h4>
                        <p><a href="#analysisData">3天增长率</a></p>
                    </li>

                    <li class="m-l-15">
                        <h4 id="ogr7-{{ product.product_id }}" {% if product.seven_growth_rates > 0 %}class="text-danger"{% else %}class="text-success"{% endif %}>{% if product.seven_growth_rates %}{% widthratio product.seven_growth_rates 1 100 %}%{% else %}-{% endif %}</h4>
                        <p><a href="#analysisData">7天增长率</a></p>
                    </li>
                    <li class="m-l-15">
                        <h4 id="ogr15-{{ product.product_id }}" {% if product.fifteen_growth_rates > 0 %}class="text-danger"{% else %}class="text-success"{% endif %}>{% if product.fifteen_growth_rates %}{% widthratio product.fifteen_growth_rates 1 100 %}%{% else %}-{% endif %}</h4>
                        <p><a href="#analysisData">15天增长率</a></p>
                    </li>
                    <li class="m-l-15">
                        <h4 id="weekly-order-{{ product.product_id }}">{% if product.weekly_orders %}{{ product.weekly_orders }}{% else %}-{% endif %}</h4>
                        <p>周订单</p>
                    </li>
                    <li class="m-l-15">
                        <h4 id="order-{{ product.product_id }}">{% if product.orders %}{{ product.orders }}{% else %}-{% endif %}</h4>
                        <p>总订单</p>
                    </li>
                    <li class="m-l-15">
                        <h4 id="vote-{{ product.product_id }}">{% if product.votes %}{{ product.votes }}{% else %}-{% endif %}</h4>
                        <p>评价数</p>
                    </li>
                    <li class="m-l-15">
                        <h4 id="wish-{{ product.product_id }}">{% if product.wish_list %}{{ product.wish_list }}{% else %}-{% endif %}</h4>
                        <p>心愿单</p>
                    </li>

                </ul>
            </div>

            <p class="text-danger">温馨提示: 此数据仅作商品分析参考，最后更新时间:<em>{% if product.trans_update_date %}{{ product.trans_update_date }}{% else %}-{% endif %}</em></p>



            <button type="button" class="btn btn-inverse waves-effect m-t-10 m-b-10 waves-light" onclick="collectOneKey('{{ product.product_id }}')"><i class="glyphicon glyphicon-refresh"></i> 更新数据</button>
            {% if user in product.user.all %}<button type="button" class="btn btn-primary waves-effect m-t-10 m-b-10 waves-light" onclick="cancelFav({{ product.product_id }})" id="fav-{{ product.product_id }}"><i class="glyphicon glyphicon-heart"></i> 取消收藏</button>{% else %}<button type="button" class="btn btn-primary waves-effect m-t-10 m-b-10 waves-light" onclick="addfav({{ product.product_id }})" id="fav-{{ product.product_id }}"><i class="glyphicon glyphicon-heart-empty"></i> 加入收藏</button>{% endif %}
            {% if user in product.monitor_user.all %}<button type="button" class="btn btn-brown waves-effect m-t-10 m-b-10 waves-light" id="mo-{{ product.product_id }}" onclick="cancelmonitor('{{ product.product_id }}')"><i class="glyphicon glyphicon-eye-open"></i> 取消监控</button>{% else %}<button type="button" class="btn btn-brown waves-effect m-t-10 m-b-10 waves-light" id="mo-{{ product.product_id }}" onclick="addmonitor('{{ product.product_id }}')"><i class="glyphicon glyphicon-eye-close"></i> 加入监控</button>{% endif %}
            <button type="button" class="btn btn-purple waves-effect m-t-10 m-b-10 waves-light"><i class="glyphicon glyphicon-paperclip"></i> 开发报备</button>

        </div> <!-- end membar card -->
    </div> <!-- end card-box -->


</div> <!-- end col -->
</div> <!-- end row -->
<div class="row" id="analysisData">
    <div class="col-md-12">
        <div class="card-box">
            <ul class="nav nav-tabs tabs-bordered">
                <li class="active">
                    <a href="#tab-trends" data-toggle="tab" aria-expanded="true" style="font-size: 24px;">
                        <span class="visible-xs"><i class="glyphicon glyphicon-stats"></i></span>
                        <span class="hidden-xs">趋势分析</span>
                    </a>
                </li>
                <li class="">
                    <a href="#tab-country" data-toggle="tab" aria-expanded="false" style="font-size: 24px;">
                        <span class="visible-xs"><i class="glyphicon glyphicon-globe"></i></span>
                        <span class="hidden-xs">国家分析</span>
                    </a>
                </li>
                <li class="">
                    <a href="#tab-user" data-toggle="tab" aria-expanded="false" style="font-size: 24px;">
                        <span class="visible-xs"><i class="glyphicon glyphicon-user"></i></span>
                        <span class="hidden-xs">用户分析</span>
                    </a>
                </li>
                <li class="">
                    <a href="#tab-transaction" data-toggle="tab" aria-expanded="false" style="font-size: 24px;">
                        <span class="visible-xs"><i class="glyphicon glyphicon-th-list"></i></span>
                        <span class="hidden-xs">交易记录</span>
                    </a>
                </li>
                <li class="">
                    <a href="#tab-calculate" data-toggle="tab" aria-expanded="false" style="font-size: 24px;">
                        <span class="visible-xs"><i class="glyphicon glyphicon-calendar"></i></span>
                        <span class="hidden-xs">运费测算</span>
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-trends" style="height: 300px;">
                    <div style="text-align: right;padding-right: 20px;background: #8d6e63;width: 200px;color: #fff"><a href="javascript:;" onclick="loadTrans(60)" style="color: #fff">60天</a>｜<a href="javascript:;" onclick="loadTrans(30)" style="color: #fff">30天</a>｜<a href="javascript:;" onclick="loadTrans(15)" style="color: #fff">15天</a>｜<a href="javascript:;" onclick="loadTrans(7)" style="color: #fff">7天</a></div>
                    <div id="TansData" style="height: 100%"></div>
                </div>
                <div class="tab-pane" id="tab-country">
                    <div class="row">
                        <div class="col-md-8">
                            <div id="CountryRank" style="height: 400px;width: 600px;"></div>
                        </div>
                        <div class="col-md-4">
                            <h4>TOP 10售卖国家整体占比情况</h4>
                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr><th>国家</th><th>订单量</th><th>占比(%)</th></tr>
                                </thead>
                                <tbody id="CountryTable">

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab-user">
                    <div class="row">
                        <div class="col-md-6">
                            <h4>成交数量占比情况</h4>
                            <table class="table table-striped">
                                <thead>
                                <tr><th>成交数量(件)</th><th>合计笔数</th><th>占比(%)</th></tr>
                                </thead>
                                <tbody id="quantityrank" ></tbody>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h4>买家等级占比情况</h4>
                            <table class="table table-striped">
                                <thead>
                                <tr><th>买家等级</th><th>订单数量</th><th>占比(%)</th></tr>
                                </thead>
                                <tbody id="rank-user" ></tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane" id="tab-transaction">
                <p><i class="glyphicon glyphicon-download-alt"></i><a target="_blank" href="{% url 'downloadcsv' %}?type=t&id={{ product.product_id }}">下载详细数据</a></p>
                    <table id="datatable" class="table table-striped table-bordered">
                        <thead>
                        <tr><th>#</th><th>用户名</th><th>国家</th><th>买家等级</th><th>成交单价</th><th>购买数量</th><th>批量</th><th>评分</th><th>成交时间</th></tr>
                        </thead><tbody>{% for trans in transactions %}<tr><td>{{ trans.id }}</td><td>{{ trans.username }}</td><td>{{ trans.country_name }} ({{ trans.country_code|upper }})</td><td>{{ trans.buyer_leval }}</td><td>{{ trans.price }}</td><td>{{ trans.quantity }}</td><td>{{ trans.lot_num }}</td><td>{{ trans.star }}</td><td>{{ trans.pub_date|date:"Y/m/d H:i" }}</td></tr>{% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane" id="tab-calculate">

                    <div class="row">
                        <div class="col-sm-12">

                                <div class="col-md-2">
                                    <div class="form-group m-r-10">
                                                    <label for="exampleInputName2">重量（ g ）</label>
                                                    <input type="text" class="form-control" id="Pweight" {% if package.weight %}value="{{ package.weight }}"{% endif %} >
                                                </div>

                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                                        <div class="row">
                                                            <div class="col-sm-4 m-b-10">
                                                                <label for="bedrooms">长（ CM ）</label>
                                                                <input type="text" class="form-control" id="Plength" {% if package.length %}value="{{ package.length }}"{% endif %}>
                                                            </div>
                                                            <div class="col-sm-4 m-b-10">
                                                                <label for="Square-ft">宽（ CM ） </label>
                                                                <input type="text" class="form-control" id="Pwidth" {% if package.width %}value="{{ package.width }}"{% endif %}>
                                                            </div>
                                                            <div class="col-sm-4 m-b-10">
                                                                <label for="car-parking">高（CM）</label>
                                                                <input type="text" class="form-control" id="Pheight" {% if package.height %}value="{{ package.height }}"{% endif %}>
                                                            </div>
                                                        </div>
                                                    </div>



                                </div>
                                <div class="col-md-2">
                                    <div class="form-group m-r-10">
                                        <label for="exampleInputName2">是否带电</label>
                                        <select name="isHandian" id="isHandian" class="form-control">
                                            <option value="0">不带电</option>
                                            <option value="1">带电</option>
                                            <option value="2">内置电池</option>
                                            <option value="3">带磁</option>
                                        </select>

                                                </div>

                                </div>
                                <div class="col-md-2">
                                    <div class="form-group m-r-10 m-t-20">
                                        <button id="getPackage" type="button" class="btn btn-primary waves-effect waves-light m-t-5">获取包裹参数</button>
                                    </div>
                                </div>
                            </div>
                        <div class="col-sm-12">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="">目的国家：</label>
                                    <select class="selectpicker" name="allCountry" id="allCountry" multiple data-selected-text-format="count > 200" data-live-search="true" data-style="btn-default">
                                        {% for c in allCountry %}
                                        <option>{{ c.country_name_cn }}</option>
                                        {% endfor %}

                                    </select>
                                        </div>
                            </div>
                            <div class="col-md-8">
                                <div class="form-group">
                                    <div class=" col-sm-12 m-t-20">
                                        <div class="checkbox checkbox-primary">
                                            <input id="hotCountry" type="checkbox">
                                            <label for="hotCountry" id="hotCountryText">
                                                热门国家:美国,英国,俄罗斯,德国,巴西,印度,澳大利亚,法国,加拿大,日本,墨西哥,比利时
	                                        </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <select multiple data-role="tagsinput" id="selectedCountry">

                        </select>
                        </div>
                    </div>

                    <div class="row">
                    <div class="col-sm-12">
                        <div class="col-xs-12 m-b-30 text-center m-t-10">
                        <button type="button" id="searchExpress" class="btn btn-purple waves-effect waves-light"><i class="mdi mdi-magnify m-r-5"></i>计算运费</button>


                        </div>
                        <div class="col-xs-12 m-t-10" id="showLogistics" style="display: none;">
                            <table class="table table-colored table-bordered table-teal">
                          <thead>
                            <tr>
                              <th>类型</th>
                              <th>渠道</th>
                              <th>是否计抛</th>
                              <th style="width: 90px;">带电类型</th>
                              <th>物流费（RMB）</th>
                              <th>推荐售价（USD）</th>
                              <th>运货时间（天）</th>
                              <th>核算报告</th>
                            </tr>
                          </thead>
                          <tbody class="logistic-fee">


                          </tbody>
                        </table>
                        </div>

                    </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</div>
<!-- end property-detail-wrapper -->

</div> <!-- container -->

</div> <!-- content -->


<div id="modal-logisticsTips" class="modal black-overlay" data-backdrop="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><span id="logisticsTitle">渠道简介</span> <a data-dismiss="modal" class="pull-right text-muted text-lg p-a-sm m-r-sm">×</a></h5>

            </div>
            <div class="modal-body text-center p-lg m-l-1 m-r-3 logisticsTipsContent">
                <p></p>
            </div>

        </div>
    </div>
</div>


<!-- Footer Copyright Start -->
{% include 'zircos/block/footer_copyright.html' %}
<!-- /Footer Copyright End -->


</div>


<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->


<!-- Right Sidebar -->
{% include 'zircos/block/right-bar.html' %}
<!-- /Right-bar -->

</div>
<!-- END wrapper -->



<script>
    var resizefunc = [];
</script>

<!-- jQuery  -->
<script src="{% static '' %}zircos/assets/js/jquery.min.js"></script>
<script src="{% static '' %}zircos/assets/js/bootstrap.min.js"></script>
<script src="{% static '' %}zircos/assets/js/detect.js"></script>
<script src="{% static '' %}zircos/assets/js/fastclick.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.blockUI.js"></script>
<script src="{% static '' %}zircos/assets/js/waves.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.slimscroll.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.scrollTo.min.js"></script>
<script src="{% static '' %}zircos/plugins/switchery/switchery.min.js"></script>

<!-- Bx slider js -->
<script src="{% static '' %}zircos/plugins/bx-slider/jquery.bxslider.min.js"></script>

<!-- DataTables init -->
<script src="{% static '' %}zircos/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="{% static '' %}zircos/plugins/datatables/dataTables.bootstrap.js"></script>

<!-- Plugins js -->
<script src="{% static '' %}zircos/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
<script type="text/javascript" src="{% static '' %}zircos/plugins/multiselect/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="{% static '' %}zircos/plugins/jquery-quicksearch/jquery.quicksearch.js"></script>
<script src="{% static '' %}zircos/plugins/select2/js/select2.min.js" type="text/javascript"></script>
<script src="{% static '' %}zircos/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="{% static '' %}zircos/plugins/bootstrap-filestyle/js/bootstrap-filestyle.min.js" type="text/javascript"></script>
<script src="{% static '' %}zircos/plugins/bootstrap-touchspin/js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="{% static '' %}zircos/plugins/bootstrap-maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script>

<!-- Sweet-Alert  -->
<script src="{% static '' %}zircos/plugins/bootstrap-sweetalert/sweet-alert.min.js"></script>
<script src="{% static '' %}zircos/assets/pages/jquery.sweet-alert.init.js"></script>

<!-- App js -->
<script src="{% static '' %}zircos/assets/js/jquery.core.js"></script>
<script src="{% static '' %}zircos/assets/js/jquery.app.js"></script>

<script type="text/javascript" src="{% static '' %}lib/echarts.min.js"></script>

<script>
    $(document).ready(function () {
        $('.property-slider').bxSlider({
            pagerCustom: '#bx-pager'
        });
    });

    function chaji(arr1,arr2){
        var arr3 = new Array();
        for(var i=0; i < arr1.length; i++){
            var flag = true;
            for(var j=0; j < arr2.length; j++){
                if(arr1[i] == arr2[j])
                    flag = false;
            }
            if(flag)
                arr3.push(arr1[i]);
        }
        //alert("chaji:"+arr3.toString());
        return arr3
    }



    $('#hotCountry').change(function(){
        //alert($("#selectedCountry").val());
        var c = $('#hotCountryText').text();
        var aa = c.replace('热门国家:','');
        //console.log(aa.split(','));
        //var hotCountry = new Array('美国','英国','俄罗斯','德国','巴西','印度','澳大利亚','法国','加拿大','日本','墨西哥','比利时');
        var hotCountry = aa.split(',');
        hotCountry.pop();
        //console.log(hotCountry);
        if($(this).is(":checked")){
            for(var i=0;i<hotCountry.length;i++){
                //console.log(hotCountry[i]);
                $('#selectedCountry').tagsinput('add',hotCountry[i]);
            }
        }else{
            for(var i=0;i<hotCountry.length;i++){
                $('#selectedCountry').tagsinput('remove',hotCountry[i]);
            }
        }
    });

    $('#searchExpress').click(function(){
        //alert($("#selectedCountry").val());
        //alert('接口暂未开放，数据仅供演示！');
        var weight = $('#Pweight').val();
        var length = $('#Plength').val();
        var width = $('#Pwidth').val();
        var height = $('#Pheight').val();
        var country = $('#selectedCountry').val();
        var isHandian = $('#isHandian').val();

        var url = "/erp/api/logisticsAPI";
        url += "?_api_=calculate";

        if(weight.length<=0 || parseInt(weight)<=0){
            alert('重量必填且大于0！');
            return false
        }else{
            url +='&weight='+weight;
        }

        if(country.length<=0){
            alert('国家必选！');
        }else{
            url +='&country='+country;
        }

        if(length.length>0 && parseInt(length)>0){
            url +='&lengths='+length;
        }
        if(width.length>0 && parseInt(width)>0){
            url +='&widths='+width;
        }
        if(height.length>0 && parseInt(height)>0){
            url +='&heights='+height;
        }
        url += '&IS_ELECTRIC='+isHandian;

        //console.log(url);

        $.getJSON(url,function(data){
            if(data.error){
                alert(data.msg);
                return false
            }
                var result = data.data.result;
                $('.logistic-fee').html('');
                html = '';
                $.each(result,function(idx,item){

                    //console.log(item['NAME']);

                    var jipao = '';
                    if(item['JIPAO']==0){
                        jipao +='不计抛';
                    }else{
                        jipao +='计抛';
                    }

                    html += '<tr><td>'+item['TYPE']+'</td>';
                    html += '<td><a onclick="showTips(this)" class="channelTips" title="'+item['SHORT_NOTE']+'" data-note="'+item['LONG_NOTE']+'">'+item['NAME']+'</a></td>';
                    html += '<td>'+jipao+'</td>';
                    html += '<td>'+item['IS_ELECTRIC']+'</td>';
                    html += '<td>'+item['FEE']+'</td>';
                    html += '<td>'+item['PRICE'].toFixed(2)+'</td>';
                    html += '<td>'+item['SHIXIAO']+'</td>';
                    html += '<td class="remark">成功</td>';
                    html += '</tr>';
                });

                $('.logistic-fee').html(html);

             });



        $('#showLogistics').css('display','block');

    });


    function showTips(obj){
        //console.log(obj);
        var txt = obj.getAttribute('data-note');
        txt = txt.replace(/\t/g,"");
        txt = txt.replace(/\r\n/g,"<br>");
        $('.logisticsTipsContent').html('<pre class="text-left p-a">'+txt+'</pre>');
        $('#logisticsTitle').text(obj.text);
        $('#modal-logisticsTips').modal('show');
    }


    $('#allCountry').change(function(){
        //alert($(this).val());
        var selectedCountry = $(this).val();
        var selectedCountry2 = $('#selectedCountry').tagsinput('items');
        //console.log(selectedCountry);
        //console.log(selectedCountry2);
        if(selectedCountry != null){
            //console.log(chaji(selectedCountry2,selectedCountry));
            var deleteCountry = chaji(selectedCountry2,selectedCountry);
            for(var i=0;i<selectedCountry.length;i++){
                $('#selectedCountry').tagsinput('add',selectedCountry[i]);
            }
            if(deleteCountry.length>0){
                console.log(deleteCountry);
                for(var i=0;i<deleteCountry.length;i++){
                    $('#selectedCountry').tagsinput('remove',deleteCountry[i]);
                }
            }
        }else{
            $('#selectedCountry').tagsinput('removeAll');
        }
    });




    $('#datatable').dataTable();


    $.getJSON("{% url 'aliexpress:getsales' %}?productId={{ product.product_id }}",function(data){
          //console.log(data["TotalSales"]);
          if(data["TotalSales"]=='None'){
              $('#totalsales').html('-');
          }else{
              $('#totalsales').html(currency_unit+' '+data["TotalSales"]);
          }
          if(data["MonthSalse"]=='None'){
              $('#monthsales').html('-');
          }else{
              $('#monthsales').html(currency_unit+' '+data["MonthSalse"]);
          }
          if(data["WeekSalse"]=='None'){
              $('#weeksales').html('-');
          }else{
              $('#weeksales').html(currency_unit+' '+data["WeekSalse"]);
          }
          if(data["MinDay"]=='None'){
              $('#firstOrder').html('-');
          }else{
              $('#firstOrder').html(data["MinDay"].split(' ')[0]);
          }

      });

    function loadTrans(days) {
        var dom = document.getElementById("TansData");
    var myChart = echarts.init(dom);
    var app = {};
    var dateData = new Array();
    var tansData = new Array();
    var multiData = new Array();
    var moneyData = new Array();
    var option = null;

    //$.getJSON("{% static '' %}default/data/transdata.json",function(data){
    $.getJSON("{% url 'aliexpress:transdata' %}?productId={{ product.product_id }}&days="+days,function(data){
        var result = data["RECORDS"];
        $.each(result,function(idx,trans){
            dateData.push(trans["pubdate"]);
            tansData.push(parseInt(trans["orders"]));
            multiData.push(parseInt(trans["multorder"]));
            moneyData.push(trans["money"]);
        });
        option = {
        title: {
            text: '成交趋势'
        },
        tooltip: {},
        toolbox: {
            left: 'right',
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: [{
            startValue: '2016-01-01'
        }, {
            type: 'inside'
        }],
        legend: {
            data:['销量','多件订单','销售额']
        },
        xAxis: {
            data: dateData
        },
        yAxis: [
        {
            name: '销售额',
            type: 'value',
            interval:50

        },
        {
            name: '数量',
            type: 'value',
            interval:1
        }
        ],
        series: [{
            name: '销量',
            type: 'bar',
            data: tansData
        },
        {
            name: '多件订单',
            type: 'bar',
            data: multiData
        },
        {
            name: '销售额',
            type: 'line',
            data: moneyData
        }]
        };
        myChart.setOption(option);
    });

    }

    loadTrans(180);


    $('#Pweight,#Plength,#Pwidth,#Pheight').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/g,''));
    });


    //获取包裹参数
    $("#getPackage").click(function(){
        $.get("{% url 'getPackage' %}?productId={{ product.product_id }}", function(result){
            if(result.error==0){
               $("#Pwidth").val(result.Width);
               $("#Plength").val(result.Length);
               $("#Pheight").val(result.Height);
               $("#Pweight").val(result.Weight);
            }else{
                swal({
                    title: "获取失败",
                    text: result.msg,
                    timer: 3000,
                    showConfirmButton: false
                });
            }
        });
    });

    //一键采集产品信息与交易记录
    function collectOneKey(productId){
          swal({
            title: "采集任务即将执行!",
            text: "3秒后开始采集.",
            timer: 3000,
            showConfirmButton: false
        });
          $.post("{% url 'aliexpress:collectOneKey' %}",{productId:productId},function(result){
              //console.log(result);
              if(result.error==1){
                  //alert(result.msg);
                  swal(result.msg,"采集失败", "warning");
                  return false;
              }else{
                  if(result.lowPrice == result.highPrice){
                      $("#price-"+productId).html('$'+(result.lowPrice).toFixed(2));
                  }else{
                      $("#price-"+productId).html('$'+(result.lowPrice).toFixed(2)+' - $'+(result.highPrice).toFixed(2));
                  }

                  $("#wish-"+productId).html(result.wishList);
                  $("#order-"+productId).html(result.orders);
                  $("#vote-"+productId).html(result.votes);
                  $("#rating-"+productId).html(result.averageStarRating);
                  $("#weekly-order-"+productId).html(result.weekly_orders);
                  $("#tsc-"+productId).html(result.top_sale_country);
                  $("#ogr3-"+productId).html(parseFloat(result.three_growth_rates).toFixed(2)*100+'%');
                  $("#ogr3-"+productId).attr("style",'width:'+parseFloat(result.three_growth_rates)*100+'%');
                  $("#ogr7-"+productId).html(parseFloat(result.seven_growth_rates).toFixed(2)*100+'%');
                  $("#ogr7-"+productId).attr("style",'width:'+parseFloat(result.seven_growth_rates)*100+'%');
                  $("#ogr15-"+productId).html(parseFloat(result.fifteen_growth_rates).toFixed(2)*100+'%');
                  $("#ogr15-"+productId).attr("style",'width:'+parseFloat(result.fifteen_growth_rates)*100+'%');
                  swal({title:"采集完毕",text:"商品数据已经采集完成!",timer: 3000,showConfirmButton: false});
                  location.href = '?';
              }
          });
      }

    //收藏产品
    function addfav(id){
          //location.href = "{% url 'favorite_add' %}?id="+id;
            $.get("{% url 'favorite_add' %}?id="+id, function(result){
                if(result=='1'){
                    var fav = $('#fav-'+id);
                    fav.html('<i class="glyphicon glyphicon-heart"></i> 取消收藏');
                    fav.attr('onclick','cancelFav(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "成功收藏商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("收藏失败", "error");
                }
              });
      }

    function cancelFav(id){
          swal({
            title: "你确定取消收藏此商品吗?",
            text: "此商品将从收藏列表移除!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是, 取消收藏 !",
            cancelButtonText: "否, 继续收藏 !",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm){
            if (isConfirm) {
                $.get("{% url 'favorite_remove' %}?id="+id, function(result){
                if(result=='1'){
                    var fav = $('#fav-'+id);
                    fav.html('<i class="glyphicon glyphicon-heart-empty" title="收藏商品"></i> 加入收藏');
                    fav.attr('onclick','addfav(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "成功移除商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: false
                    });
                }else{
                    swal("取消收藏失败", "error");
                }
              });
            }else {
                swal("已取消", "放弃操作", "error");
            }
        });
      }

    function addmonitor(id){
          //location.href = "{% url 'favorite_add' %}?wordId="+id
          $.get("{% url 'aliexpress:monitor_add' %}?id="+id, function(result){
                if(result=='1'){
                    $('#mo-'+id).html('<i class="glyphicon glyphicon-eye-open"></i> 取消监控');
                    //$('#fav-'+id).removeAttr('onclick');
                    $('#mo-'+id).attr('onclick','cancelmonitor(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "商品［"+id+"］成功加入监控列表!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("收藏失败", "error");
                }
            });
      }

    function cancelmonitor(id){
          swal({
            title: "你确定取消监控此商品吗?",
            text: "此商品将从列表移除!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是, 取消监控 !",
            cancelButtonText: "否, 继续监控 !",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function(isConfirm){
            if (isConfirm) {
                $.get("{% url 'aliexpress:monitor_remove' %}?id="+id, function(result){
                if(result=='1'){
                    //$('.p-'+id).remove();
                    $('#mo-'+id).html('<i class="glyphicon glyphicon-eye-close"></i> 加入监控');
                    //$('#fav-'+id).removeAttr('onclick');
                    $('#mo-'+id).attr('onclick','addmonitor(\''+id+'\')');
                    swal({
                        title: "操作成功!",
                        text: "取消监控商品［"+id+"］!",
                        timer: 1000,
                        showConfirmButton: true
                    });
                }else{
                    swal("操作失败", "error");
                }
            });
            }else {
                swal("已取消", "放弃操作", "error");
            }
        });

      }

</script>

<script>
        var dom2 = document.getElementById("CountryRank");
        var rankChart = echarts.init(dom2);
        var countryName = new Array();
        var orders = new Array();
        var allData = new Array();
        var option2 = null;

        //$.getJSON("data/trans_country.json",function(data){
        $.getJSON("{% url 'aliexpress:countryrank' %}?productId={{ product.product_id }}",function(data){
            //console.log(data["RECORDS"]);
            var result = data["RECORDS"];
            var c = 0;
            $('#hotCountryText').html('');
            var hotCountry = '热门国家:';
            $.each(result,function(idx,trans){
                if(c >9){
                    return ;
                }
                countryName.push(trans["country_name"]);
                hotCountry += trans["country_name"].split('(')[0];
                hotCountry += ',';
                orders.push(parseInt(trans["orders"]));
                allData.push({value:parseInt(trans["orders"]),name:trans["country_name"]})
                c +=1;
                //$('#rank-item').append('<li>'+parseInt(trans["orders"])+'</li>');
                $('#CountryTable').append('<tr><td>'+trans["country_name"]+'</td><td>'+parseInt(trans["orders"])+'</td><td>'+(parseFloat(trans["percent"])*100).toFixed(2)+'%</td></tr>');
            });

            $('#hotCountryText').html(hotCountry);

            option2 = {
                title: {
                    text: 'Top10国家排行榜'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    top:'80',
                    data: countryName
                },
                series: [{
                    name: '销量',
                    type: 'pie',
                    data: allData
                }
                ]
            };
            rankChart.setOption(option2);
        });


    //数量占比
    $.getJSON("{% url 'aliexpress:quantityrank' %}?productId={{ product.product_id }}",function(data){
          var result = data["RECORDS"];
          $.each(result,function(idx,trans){
              $('#quantityrank').append('<tr><td>'+parseInt(trans["quantity"])+'</td> <td>'+parseInt(trans["amount"])+'</td> <td>'+(parseFloat(trans["percent"])*100).toFixed(2)+'%</td></tr>');
          });
      });

    //用户占比
    $.getJSON("{% url 'aliexpress:userrank' %}?productId={{ product.product_id }}",function(data){
          var result = data["RECORDS"];
          $.each(result,function(idx,trans){
              $('#rank-user').append('<tr><td>'+trans["buyer_leval"]+'</td><td>'+parseInt(trans["orders"])+'</td><td>'+(parseFloat(trans["percent"])*100).toFixed(2)+'%</td></tr>');
          });
      });

  </script>

{% include 'zircos/block/footer_comm.html' %}


<div id="YOUDAO_SELECTOR_WRAPPER" style="display:none; margin:0; border:0; padding:0; width:320px; height:240px;"></div>
<script type="text/javascript" src="http://fanyi.youdao.com/openapi.do?keyfrom=TradeTrends&key=633004838&type=selector&version=1.2&translate=on" charset="utf-8"></script>

</body>
</html>